var myChart = echarts.init(document.querySelector('.map .chart'))

var citydata = [{
        name: '海南',
        value: 140,
    },
    {
        name: '南海诸岛',
        value: 4,
    },
    {
        name: '台湾',
        value: 127,
    },
    {
        name: '北京',
        value: 40,
    },
    {
        name: '天津',
        value: 40,
    }, {
        name: '上海',
        value: 30,
    }, {
        name: '重庆',
        value: 100,
    }, {
        name: '河北',
        value: 70,
    }, {
        name: '河南',
        value: 170,
    }, {
        name: '云南',
        value: 90,
    }, {
        name: '辽宁',
        value: 100,
    }, {
        name: '黑龙江',
        value: 100,
    }, {
        name: '湖南',
        value: 60,
    }, {
        name: '安徽',
        value: 180,
    }, {
        name: '山东',
        value: 190,
    }, {
        name: '新疆',
        value: 40,
    }, {
        name: '江苏',
        value: 120,
    }, {
        name: '浙江',
        value: 70,
    }, {
        name: '江西',
        value: 80,
    }, {
        name: '湖北',
        value: 110,
    }, {
        name: '广西',
        value: 150,
    }, {
        name: '甘肃',
        value: 70,
    }, {
        name: '山西',
        value: 120,
    }, {
        name: '内蒙古',
        value: 60,
    }, {
        name: '陕西',
        value: 70,
    }, {
        name: '吉林',
        value: 80,
    }, {
        name: '福建',
        value: 80,
    }, {
        name: '贵州',
        value: 90,
    }, {
        name: '广东',
        value: 90,
    }, {
        name: '青海',
        value: 20,
    }, {
        name: '西藏',
        value: 120,
    }, {
        name: '四川',
        value: 190,
    }, {
        name: '宁夏',
        value: 20,
    },

];

var yMax = 200;
var dataShadow = [];

var resultdata0 = [];
var titledata = [];
var bartop10 = [];

function NumDescSort(a, b) {
    return b.value - a.value;
}

function NumAsceSort(a, b) {
    return a.value - b.value;
}

// 先进行一次降序排序，找出最大的前十个
citydata.sort(NumDescSort);

for (var i = 0; i < 20; i++) {
    var top10 = {
        name: citydata[i].name,
        value: citydata[i].value,
    };
    bartop10.push(top10);
    dataShadow.push(yMax);
}

bartop10.sort(NumAsceSort);
for (var i = 0; i < bartop10.length; i++) {
    titledata.push(bartop10[i].name);
}

// console.log(citydata);
// console.log(bartop10);
// console.log(titledata);

var option = {
    title: [{
        show: true,
        top: "8%",
        left: '32%',
        textStyle: {
            color: '#ddd',
            fontSize: 12,
        },
        text: '全国各地域确诊人群分布地图',
    }, {
        show: true,
        text: '省份/直辖市TOP20',
        right: '20',
        textStyle: {
            color: '#eee',
            fontSize: 12,
        },
    }, ],
    tooltip: {
        backgroundColor: 'rgba(73, 84, 123, .9)',
        borderColor: 'rgba(73, 84, 123, .9)',
        trigger: 'item',
        textStyle: {
            color: '#fff',
        },
    },
    legend: {
        x: 'center',
        bottom: '25',
        right: '200',
        itemGap: 20,
        itemWidth: 8,
        itemHeight: 8,
        icon: 'circle',
        textStyle: {
            color: '#fff', //字体颜色
        },
        show: true,
    },
    grid: {
        // 仅仅控制条形图的位置
        show: true,
        containLabel: false,
        right: 40,
        top: 50,
        bottom: "20%",
        width: '10%',
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 200,
        text: ['更多则色调更深', '确诊新冠肺炎人数'],
        textStyle: {
            color: "#ddd"
        },
        seriesIndex: [0, 2],
        dimension: 0,
        realtime: false,
        left: 0,
        bottom: "20%",
        itemWidth: 18,
        itemHeight: 100,
        calculable: true,
        inRange: {
            color: ['#95cee9', '#00aeff'],
            symbolSize: [100, 100],
        },
        outOfRange: {
            color: ['#eeeeee'],
            symbolSize: [100, 100],
        },
    },
    toolbox: {
        show: false,
    },

    xAxis: [{
        type: 'value',
        position: 'top',
        inside: false,
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        margin: 10,
    }, ],
    yAxis: [{
        type: 'category',
        boundaryGap: true,
        axisLine: {
            show: false,
        },
        axisLabel: {
            align: 'right',
            margin: 10,
            textStyle: {
                color: '#ddd',
            },
            showMaxLabel: true,
        },
        data: titledata,
    }, ],

    series: [{
            name: '确诊人数',
            type: 'map',
            mapType: 'china',
            left: '100',
            width: '60%',
            roam: 'move',
            mapValueCalculation: 'sum',
            zoom: 1,
            selectedMode: false,
            showLegendSymbol: false,
            label: {
                normal: {
                    textStyle: {
                        color: '#eee',
                    },
                },
                emphasis: {
                    textStyle: {
                        color: '#234EA5',
                    },
                },
            },
            itemStyle: {
                normal: {
                    areaColor: '#EEEEEE',
                    borderColor: '#FFFFFF',
                },
                emphasis: {
                    areaColor: '#E5F39B',
                },
            },
            data: citydata,
        },
        {
            name: '背景',
            type: 'bar',
            roam: false,
            visualMap: false,
            itemStyle: {
                color: '#eeeeee',
                opacity: 0.5,
            },
            label: {
                show: false,
            },
            emphasis: {
                itemStyle: {
                    color: '#eeeeee',
                    opacity: 0.5,
                },
                label: {
                    show: false,
                },
            },
            silent: true,
            barWidth: 18,
            barGap: '-100%',
            data: dataShadow,
            animation: false,
        }, {

            type: 'bar',
            roam: false,
            visualMap: false,
            // itemStyle: {
            //   color: "#60ACFC"
            // },
            barWidth: 18,
            label: {
                normal: {
                    show: true,
                    fontSize: 12,
                    position: 'insideLeft',
                },
                emphasis: {
                    show: true,
                },
            },
            data: bartop10,
        },
    ],
};


myChart.setOption(option);

$(window).resize(myChart.resize);